<template>
  <div class="container">
    <div class="my">
      <TopCell text="我的跟帖" @click="backUser" />
    </div>
    <CommentsModule
      v-for="(item, index) in data"
      :key="index"
      :comment="item.content"
      :originalText="item.post == null ? '' : item.post.title"
      :replyShow="item.parent == null ? false : true"
      :replyUser="item.parent == null ? '' : item.parent.user.nickname"
      :replyContent="item.parent == null ? '' : item.parent.content"
    />
    <div class="more" v-if="more">
      <span @click="loadMore"
        >加载更多 <span class="iconfont iconjiantou1"></span>
      </span>
    </div>
    <div class="more" v-else>
      <span>没有更多了 </span>
    </div>
  </div>
</template>

<script>
import { myComment } from "@/api/myComment";
import { paging } from "@/api/paging";
import TopCell from "../components/TopCell";
import CommentsModule from "../components/CommentsModule";
export default {
  components: {
    TopCell,
    CommentsModule,
  },
  data() {
    return {
      data: [],
      page: 1,
      more: true,
    };
  },
  methods: {
    loadMore() {
      this.page++;
      // console.log(this.page);
      paging("/user_comments", { pageIndex: this.page, pageSize: 20 }).then(
        (res) => {
          // console.log(res);
          // 将返回的数据跟上一次的结合
          this.data = this.data.concat(res.data.data);
          // console.log(res.data.data);
          // console.log(res.data.data.length);
          if (res.data.data.length == 0) {
            this.more = false;
          }
        }
      );
    },
    backUser() {
      this.$router.push("/user");
    },
  },
  created() {
    paging("/user_comments", { pageIndex: 1, pageSize: 4 }).then((res) => {
      // console.log(res);
      this.data = res.data.data;
    });
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f2f2f2;
  height: 100%;
  .my {
    padding: 0 20/360 * 100vw;
  }
  .comments {
    padding: 0 25/360 * 100vw;
    border-bottom: 2px solid #ccc;
    margin-top: 30/360 * 100vw;
    .commentDate {
      font-size: 12/360 * 100vw;
      color: #a0a0a0;
    }
    .comment {
      width: 300/360 * 100vw;
      margin: 7/360 * 100vw 0 12/360 * 100vw;
      font-size: 16/360 * 100vw;
      color: #533228;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .originalText {
      margin-bottom: 8/360 * 100vw;
      font-size: 12/360 * 100vw;
      color: #9f9f9f;
    }
  }
  .more {
    display: flex;
    justify-content: center;
    margin-top: 20/360 * 100vw;
    & > span {
      display: block;
      height: 40/360 * 100vw;
      line-height: 40/360 * 100vw;
      width: 100 /360 * 100vw;
      text-align: center;
    }
  }
}
</style>